<template>
    <div class="userBox">
        <div class="userTop">
            <h1>USER/CENTER<br/>个人中心</h1>
        </div>
        <div class="userMain">
            <div class="userLeft">
                <div class="myCenter" :class="{activeColor:flag}" @click="changeInfo('center')">个人中心</div>
                <div class="collect" :class="{activeColor:!flag}" @click="changeInfo('collect')">我的收藏</div>
            </div>
            <div class="userRight">
                <el-form :model="formData" v-if="flag">
                    <el-form-item label="账号">
                        <el-input v-model="formData.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="formData.password" type="password"></el-input>
                    </el-form-item>                    
                    <el-form-item label="姓名">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>                    
                    <el-form-item label="年龄">
                        <el-input v-model="formData.age"></el-input>
                    </el-form-item>                    
                    <el-form-item label="性别">
                        <el-select v-model="formData.gender">
                            <el-option value="男"></el-option>
                            <el-option value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机">
                        <el-input v-model="formData.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="formData.email"></el-input>
                    </el-form-item>
                    <el-form-item class="userPhoto">
                        <img :src="formData.photo" width="100px" height="100px">
                        <UploadImg :type="`USER`" @getImgUrl="getImgUrl" />
                    </el-form-item>
                    <el-form-item class="userBtn">
                        <el-button type="primary" @click="changeUser">保存</el-button>
                    </el-form-item>
                </el-form>
                <div class="collectBox" v-else>
                    <div id="listBox">
                        <el-card v-for="(col,index) in collectList" :key="index">
                            <div class="imageBox">
                                <img :src="col.picture" alt="000">
                            </div>
                            <div class="collectContent">{{col.tableName}}</div>
                        </el-card>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {reqYongHuList,reqChangeData,reqShoucangList} from '../../../api'
export default {
    data() {
        return {
            flag:true,
            formData:{},
            imgUrl:'',
            collectList:[],
            pageNum:1,
            pageSize:5
        }
    },
    created() {
        this.getData()
        this.getCollect()
    },
    methods: {
        //获取用户
        async getData() {
            let result = await reqYongHuList({ pageNum:1, pageSize : 1});
            if (result.code != 200) return false
            this.formData = result.data.list[0];
        },
        //获取收藏
        async getCollect(){
            let {pageNum,pageSize} = this
            let result = await reqShoucangList({pageNum,pageSize})
            if(result.code == 200){
                this.collectList = result.data.list
            }
        },
        //编辑用户
        async changeUser() {
            this.imgUrl != "" ? (this.formData.photo = this.imgUrl) : false;
            let result = await reqChangeData("/user/update", this.formData);
            if (result.code != 200) return this.$message.error("修改失败");
            this.$message({ message: "修改成功", type: "success" });
            this.getData()
        },
        changeInfo(type){
            this.flag = !this.flag
        },
        getImgUrl(url){
            this.imgUrl = url
        }
    },
}
</script>

<style lang="less" >
    .userBox{
        padding-top: 20px;
        width: 60%;
        margin: 0px auto;
        .userTop{
            text-align: center;
            h1{
                color: #444;
            }
        }
        .userMain{
            margin-top: 50px;
            display: flex;
            // border: 1px solid firebrick;
            .userLeft{
                flex: 0.2;
                div{
                    box-sizing: border-box;
                    text-align: center;
                    padding: 10px;
                    cursor: pointer;
                }
                .activeColor{
                    color: #fff;
                    background-color: teal;
                }
            }
            .userRight{
                flex: 0.8;
                padding: 50px 0 0 50px;
                margin-bottom: 50px;
                .el-form{
                    width: 100%;
                    .el-form-item{
                        display: flex;
                        width: 100%;
                        .el-form-item__content{
                            flex: 1;
                            .el-input,.el-select{
                                width: 100% !important;
                            } 
                            
                        }
                    }
                    .userBtn,.userPhoto{
                        padding-left:40px;
                    }
                }
                .collectBox{
                    #listBox{
                        .el-card{
                            width: 80%;
                            margin: 30px 0;
                            border-radius: 7px;
                            .el-card__body{
                                padding: 10px !important;
                                display: flex;
                            }
                            .imageBox{
                                width: 120px;
                                height: 120px;
                                img{
                                    width: 100%;
                                    height: 100%;
                                } 
                            }
                            .collectContent{
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex: 1;
                            }
                        }
                    }
                }
            }
        }
    } 
</style>